<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>

    <!-- bootstorp 引入所需css js -->
    <link rel="stylesheet" href="js/bootstrap/bootstrap3/css/bootstrap.css">
    <link rel="stylesheet" href="js/bootstrap/bootstrap3/css/bootstrap-theme.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap3/js/bootstrap.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.css">
    <script type="text/javascript" src="js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.css">
    <script type="text/javascript" src="js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootstrap-table/bootstrap-table.css">
    <script type="text/javascript" src="js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"></link>
    <script type="text/javascript" src="js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootstrap-fileinput/css/fileinput.css"></link>
    <script type="text/javascript" src="js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css"></link>
    <link rel="stylesheet" href="js/bootstrap.min.css">
    <link href="js/app.css" rel="stylesheet">

    <style type="text/css">
        .vertical-center
        {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>

</head>
<body>

<div class="panel panel-warning">
    <div class="panel-heading " style="background: #d9534f; color: #ffffff">
        <span class="glyphicon glyphicon-th-large" style="margin-right: 10px" />个人中心
    </div>
    <div class="panel-heading   ">
        <div class="row">
            <div class="col-xs-6 col-md-6">
                <div>
                        <span>ID:
                            <label>
                                1234K1311P99
                            </label>
                            <button>复制ID</button>
                        </span>
                </div>
                <div>
                        <span>昵称:
                            <label>
                                饭饭是你宝贝
                                <button>修改昵称</button>
                            </label>
                        </span>
                </div>
            </div>
        </div>
    </div>
    <ul class="nav nav-pills nav-stacked   nav-divider">
        <br>
        <li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-star" style="margin-right: 10px">
            </span>当前等級</a></span></li>
        <li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-yen" style="margin-right: 10px">
            </span>当前积分</a><span class="glyphicon glyphicon-chevron-right" style="float: right;
                margin-right: 5px; margin-top: -30px; color: #FFF"></span></li>
        <li class="bg-warning"><a href="#"><span class="glyphicon glyphicon-calendar" style="margin-right: 10px">
            </span>注册时间</a><span class="glyphicon glyphicon-chevron-right" style="float: right;
                margin-right: 5px; margin-top: -30px; color: #FFF"></span></li>
    </ul>
</div>
    </div>




</body>
</html>